<template>
    <div class="container-fluid" id="hole-qrcode">
        <div class="row">
            <div class="col text-center">
                <button type="button" id="print-btn" class="btn btn-primary btn-sm" @click="printPage"><i
                        class="fa fa-print"></i>打印</button>
            </div>
        </div>
        <div class="row">
            <div class="col alert alert-success text-center">
                登录前请提醒用户在微信点击[继续访问]按钮
            </div>
        </div>
        <template v-for="(value, name, index) in qrcodeGroup">
            <div class="row mt-6">
                <div class="col">
                    <div class="alert alert-success text-center">
                        {{ index + 1 }}: {{ name }}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col text-center" v-for="(imgUrl, uindex) in value" :key="uindex">
                    <div class="card w-110px h-100px">
                        <img :src="imgUrl" :alt="name" class="card-img-top w-100px h-100px">
                        <p class="card-text">{{ name }}</p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'print-js/dist/print.css'
import printJS from 'print-js'
import { EvaProjectUserApi } from '../../../api/eva-project/user'
import { mobileUrl } from '../../../api/common/network'
import QRCode from "qrcode";
const api = new EvaProjectUserApi;
export default {
    name: "Qrcode",
    data() {
        return {
            qrcodeGroup: {}
        }
    },
    async created() {

        const users = await api.findUserByProject({ project_id: this.$route.query.project_id, is_test: this.$route.query.is_test });
        const qrcode = {};
        for (const { project_id, project_owner_id, project_owner_name, name, code } of users.data) {
            if (qrcode[project_owner_name] === undefined) {
                qrcode[project_owner_name] = [];
            }
            const url = `${mobileUrl}?project_id=${project_id}&project_owner_id=${project_owner_id}&name=${name}&code=${code}`;
            const imgUrl = await this.generateQR(url);
            qrcode[project_owner_name].push(imgUrl);
        }
        this.qrcodeGroup = { ...qrcode };

    },
    methods: {
        async generateQR(url) {
            let result;
            try {
                result = await QRCode.toDataURL(url)
                return result;
            } catch (err) {
                console.error(err)
            }
        },
        printPage() {
            printJS({ printable: 'hole-qrcode', type: 'html', ignoreElements: ["print-btn"] })
        }
    }
}
</script>